{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>湘西之旅 - 用户登录</title>
    <!-- 引入外部资源 -->
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 引入湘西风格字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">

    <style>
        /* 湘西主题色彩 */
        :root {
            --primary: #1A4D2E;      /* 湘西靛蓝 - 主色调 */
            --secondary: #E63946;    /* 朱砂红 - 强调色 */
            --accent: #FFB703;       /* 金色 - 点缀色 */
            --neutral: #F1FAEE;      /* 米色 - 背景色 */
            --dark: #1D3557;         /* 深色 - 文本 */
        }

        body {
            background-color: var(--neutral);
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%231a4d2e' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px 0;
        }

        /* 登录容器样式 */
        .account {
            width: 100%;
            max-width: 500px;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin: 20px;
            position: relative;
            border: none;
            padding: 0;
        }

        /* 顶部装饰区域 */
        .account-header {
            background-color: var(--primary);
            color: white;
            padding: 30px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .account-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm20 0a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM10 37a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm10-17h20v20H20V20zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
            opacity: 0.3;
        }

        .account h1 {
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 2.5rem;
            margin: 0;
            position: relative;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .account-logo {
            width: 80px;
            height: 80px;
            margin: 0 auto 15px;
            background-color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .account-logo i {
            color: var(--primary);
            font-size: 36px;
        }

        /* 表单区域 */
        .account-body {
            padding: 40px 30px;
        }

        .form-group {
            margin-bottom: 25px;
            position: relative;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: var(--dark);
            font-weight: 500;
        }

        /* 使用input-group确保图标和输入框完美对齐 */
        .input-group {
            position: relative;
            display: table;
            border-collapse: separate;
            width: 100%;
        }

        .input-group-addon {
            padding: 12px 15px;
            font-size: 16px;
            font-weight: normal;
            line-height: 1;
            color: #999;
            text-align: center;
            background-color: #fff;
            border: 1px solid #ddd;
            border-right: none;
            border-radius: 8px 0 0 8px;
            width: 1%;
            white-space: nowrap;
            vertical-align: middle;
            display: table-cell;
        }

        .input-group .form-control {
            position: relative;
            z-index: 2;
            float: left;
            width: 100%;
            margin-bottom: 0;
            border-left: none;
            border-radius: 0 8px 8px 0;
            padding-left: 15px;
            height: 48px;
        }

        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(26, 77, 46, 0.1);
            outline: none;
        }

        .input-group-addon:focus,
        .form-control:focus + .input-group-addon {
            color: var(--primary);
            border-color: var(--primary);
        }

        /* 按钮样式 */
        .btn-login {
            width: 100%;
            padding: 12px;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-login:hover {
            background-color: #143d24;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .btn-login:active {
            transform: translateY(0);
        }

        /* 底部链接 */
        .account-footer {
            text-align: center;
            margin-top: 25px;
            padding-top: 20px;
            border-top: 1px dashed #eee;
        }

        .account-footer a {
            color: var(--primary);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .account-footer a:hover {
            color: var(--secondary);
            text-decoration: underline;
        }

        /* 装饰元素 */
        .decorative-element {
            position: absolute;
            width: 60px;
            height: 60px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23e63946' fill-opacity='0.2' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3C/svg%3E");
            opacity: 0.5;
            z-index: 1;
        }

        .top-left {
            top: -15px;
            left: -15px;
        }

        .bottom-right {
            bottom: -15px;
            right: -15px;
            transform: rotate(180deg);
        }

        /* 错误提示样式 */
        .error-message {
            color: var(--secondary);
            font-size: 0.9rem;
            margin-top: 5px;
            display: none;
        }

        .error-message.show {
            display: block;
        }

        /* 响应式调整 */
        @media (max-width: 576px) {
            .account h1 {
                font-size: 2rem;
            }

            .account-body {
                padding: 30px 20px;
            }
        }
    </style>
</head>
<body>
    <div class="account">
        <!-- 装饰元素 -->
        <div class="decorative-element top-left"></div>
        <div class="decorative-element bottom-right"></div>

        <!-- 头部区域 -->
        <div class="account-header">
            <div class="account-logo">
                <i class="fa fa-map-signs"></i>
            </div>
            <h1>湘西之旅</h1>
            <p style="position: relative; margin-top: 10px;">探索神秘湘西，体验民族风情</p>
        </div>

        <!-- 表单区域 -->
        <div class="account-body">
            <form>
                <!-- 添加CSRF令牌 -->
                {% csrf_token %}

                <div class="form-group">
                    <label for="username">用户名</label>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-user"></i></span>
                        <input type="text" class="form-control" id="username" placeholder="请输入用户名">
                    </div>
                    <div class="error-message" id="usernameError"></div>
                </div>

                <div class="form-group">
                    <label for="password">密码</label>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                        <input type="password" class="form-control" id="password" placeholder="请输入密码">
                    </div>
                    <div class="error-message" id="passwordError"></div>
                </div>

                <div class="form-group" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
                    <label class="checkbox-inline" style="margin: 0;">
                        <input type="checkbox" value="" id="rememberMe"> 记住我
                    </label>
                    <a href="#" style="color: var(--primary);">忘记密码？</a>
                </div>

                <button type="submit" class="btn-login">登 录</button>

                <div class="account-footer">
                    <p>还没有账号？<a href="/register/">立即注册</a></p>
                </div>
            </form>
        </div>
    </div>

    <script src="{% static 'js/jquery-3.7.1.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.js' %}"></script>
    <script>
        $(document).ready(function() {
            // 获取CSRF令牌
            const csrftoken = $('input[name="csrfmiddlewaretoken"]').val();

            // 设置AJAX请求默认头信息
            $.ajaxSetup({
                beforeSend: function(xhr, settings) {
                    if (!this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });

            $('form').submit(function(e) {
                e.preventDefault();
                let isValid = true;

                // 获取表单值
                const username = $('#username').val().trim();
                const password = $('#password').val().trim();
                const rememberMe = $('#rememberMe').is(':checked');

                // 清空之前的错误信息
                $('.error-message').removeClass('show');

                // 前端验证
                if (!username) {
                    $('#usernameError').text('请输入用户名').addClass('show');
                    $('#username').focus();
                    isValid = false;
                }

                if (!password) {
                    $('#passwordError').text('请输入密码').addClass('show');
                    if (isValid) { // 只有当用户名验证通过时才聚焦密码框
                        $('#password').focus();
                    }
                    isValid = false;
                }

                if (!isValid) {
                    return false;
                }

                // 显示加载状态
                const loginButton = $('.btn-login');
                const originalText = loginButton.text();
                loginButton.text('登录中...').prop('disabled', true);

                // 发送登录请求
                $.ajax({
                    url: '/api/login/',  // 对应urls.py中的配置
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        username: username,
                        password: password,
                        remember_me: rememberMe
                    }),
                    success: function(response) {
                        if (response.status === 'success') {
                            // 登录成功，显示提示并跳转
                            alert(response.message);
                            window.location.href = response.redirect_url || '/';
                        } else {
                            // 显示错误信息
                            alert(response.message || '登录失败，请重试');
                        }
                    },
                    error: function(xhr) {
                        try {
                            const response = JSON.parse(xhr.responseText);
                            // 显示服务器返回的错误信息
                            if (response.message) {
                                alert(response.message);
                            } else {
                                alert('登录失败，请检查用户名和密码');
                            }
                        } catch (e) {
                            alert('服务器错误，请稍后再试');
                        }
                    },
                    complete: function() {
                        // 恢复按钮状态
                        loginButton.text(originalText).prop('disabled', false);
                    }
                });
            });

            // 输入时清除错误提示
            $('#username, #password').on('input', function() {
                $(this).closest('.form-group').find('.error-message').removeClass('show');
            });
        });
    </script>
</body>
</html>